<template>
	<div id="proTabBar">
		<TabBar>
			<TabBarItem :path="'/homepage/'+userid" activeColor="rgb(43,147,158)">
				<img slot="tabbar_img" src="~assets/img/tabbar_logo/HomePage.png">
				<img slot="tabbar_img2" src="~assets/img/tabbar_logo/HomePage_2.png">
				<p slot="tabbar_text">首页</p>
			</TabBarItem>
			<TabBarItem path="/classification" activeColor="rgb(43,147,158)">
				<img slot="tabbar_img" src="~assets/img/tabbar_logo/Selected.png">
				<img slot="tabbar_img2" src="~assets/img/tabbar_logo/Selected_2.png">
				<p slot="tabbar_text">分类</p>
			</TabBarItem>
			<TabBarItem path="/original" activeColor="rgb(43,147,158)">
				<img slot="tabbar_img" src="~assets/img/tabbar_logo/Original.png">
				<img slot="tabbar_img2" src="~assets/img/tabbar_logo/Original_2.png">
				<p slot="tabbar_text">原创</p>
			</TabBarItem>
			<TabBarItem path="/mine" activeColor="rgb(43,147,158)">
				<img slot="tabbar_img" src="~assets/img/tabbar_logo/Mine.png">
				<img slot="tabbar_img2" src="~assets/img/tabbar_logo/Mine_2.png">
				<p slot="tabbar_text">我的</p>
			</TabBarItem>
		</TabBar>
	</div>
	</div>
</template>

<script>
	import TabBar from 'common/TabBar/TabBar.vue';
	import TabBarItem from 'common/TabBar/TabBarItem.vue';
	
	export default {
		name: 'proTabBar',
		components: {
			TabBar,
			TabBarItem
		},
		data() {
			return {
				userid: '',
			}
		},
		created() {
			this.userid = this.$store.state.userid;
		}
	}
</script>

<style>
	.TabBarItem img{
		width: 30px;
		height: 25px;
		display: block;
		margin: 0 auto;
	}
	.TabBarItem p{
		text-align: center;
		margin: -2px;
		font-size: 13px;
	}
	.TabBarItem:hover{
		background: darkgray;
	}
</style>
